<template>
	<view class="all">
		<view class="hearder-cont">
			<view style="width: 100%; height: 10rpx;"></view>
			<view class="hearder" @click="search">
				<image src="../../static/icon/search.png" mode=""></image>
				<input type="text" placeholder="请输入..." placeholder-style="color: #FFFFFF;" disabled/>
			</view>
		</view>
		<view class="content">
			<view class="content-left">
				<view style="margin: 0 auto; width: 100%;height: 100rpx;text-align: center;line-height: 100rpx;">
					商品推荐
				</view>
				<view class="navbar" v-for="(item,index) in barList" @click="chooseBar(item,index)" :class="activ==index?'bar-activ':''">
					{{item.name}}
				</view>
				
			</view>
			<view class="content-right" >
				<view style="width: 100%;height: 30rpx;"></view>
				<view class="right-item">
					<view class="item" v-for="item in barItem">
						<image :src="item.image" ></image>
						<view>{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '../../store/index.js'
	import http from "../../util/httpRequest.js"
	export default {
		data() {
			return {
				barList:[],
				activ:0,
				parentId:7,
				barItem:[]
			}
		},
		computed:{
			
		},
		methods: {
			getBar(){
				var that = this
				uni.request({
					url:http.productUrl+"product/shoptype/typelist",
					method:"GET",
					success(res) {
						that.barList = res.data.list
					}
				})
			},
			chooseBar(item,index){
				var that = this
				that.activ = index
				that.parentId = item.id
				that.getBarItem()
				
			},
			getBarItem(){
				var that = this
				that.barItem = []
				uni.request({
					url:http.productUrl+"product/shoptype/baritem",
					method:"POST",
					data:that.parentId,
					success(res) {
						that.barItem = res.data.list
						// console.log(res)
					}
					
				})
			},
			search(){
				uni.reLaunch({
					url:"/pages/common/search",
					success() {
						store.commit("router","/pages/type/type")
					}
					
				})
			},
			
			
			
		},
		created() {
			this.getBar()
			this.getBarItem()
			
		}
	}
</script>

<style scoped>
	.all{
		width: 100%;
		/* height: 100%; */
		background-color: #E9E8E6;
	}
	.hearder-cont{
		width: 100%;
		min-height: 100rpx;
		background-color: #FFFFFF;
		
	}
	.hearder{
		display: flex;
		margin: 0 auto;
		width: 70%;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #52ACFF;
		background-image: linear-gradient(68deg, #52ACFF 25%, #34ff2c 100%);

	}
	.hearder>image{
		margin-top: 5rpx;
		margin-left: 10rpx;
		width: 70rpx;
		height: 70rpx;
	}
	.hearder>input{
		height: 80rpx;
		line-height: 80rpx;
		color: #FFFFFF;
	}
	.content{
		display: flex;
		/* background-color: #F4D03F; */
		margin-top: 10rpx;
		height: 1200rpx;
	}
	.content-left{
		width: 30%;
		max-height: 1200rpx;
		overflow-y: auto;
		flex-flow: wrap;
		/* background-color: #09BB07 */
	}
	.navbar{
		width: 100%;
		margin-top: 10rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		/* background-color: #08E3EA; */
	}
	.bar-activ{
		color: #007AFF;
		background-color: #FFFFFF;
		/* border-bottom-right-radius: -20rpx;
		border-top-right-radius: -20rpx; */
	}
	.content-right{
		width: 70%;
		height: 1200rpx;
		background-color: #FFFFFF;
	}
	.right-item{
		display: flex;
		overflow-y: auto;
		flex-flow: wrap;
		max-height: 1150rpx;
		/* line-height: 0; */
		margin: 0 auto;
		width: 100%;
		/* height: 1150rpx; */
		/* background-color: #007AFF; */
	}
	.item{
		margin-left: 20rpx;
		margin-top: 20rpx;
		width: 150rpx;
		height: 180rpx;
		/* background-color: #09BB07; */
	}
	.item>image{
		width: 150rpx;
		height: 130rpx;
		border-radius: 15rpx;
	}
	.item>view{
		width: 100%;
		text-align: center;
	
	}
</style>
